<template>
  <div>
    <Section title="基本信息">
      <RowAttribute :label-width="labelWidth" label="流程名称" placeholder="请输入流程名称">
        <Input v-model="flowModel.flowModelName" placeholder="请输入流程名称"/>
      </RowAttribute>

      <RowAttribute :label-width="labelWidth" label="是否启用">
        <Select v-model="flowModel.enable"
                placeholder="是否启用">
          <SelectOption :value="1">是</SelectOption>
          <SelectOption :value="0">否</SelectOption>
        </Select>
      </RowAttribute>

      <RowAttribute :label-width="labelWidth" label="流程标题">
        <FormulaEditor :service="service" :flowModel="flowModel" placeholder="请配置流程公式"
                       @update:title="title => flowModel.titleFormulaText = title"
                       @update:value="value => flowModel.titleFormula = value"
                       :value="flowModel.titleFormula" :title="flowModel.titleFormulaText"/>
      </RowAttribute>
    </Section>

    <Section title="开发配置">
      <RowAttribute :label-width="labelWidth" label="启动前监听">
        <ListenerSelector :service="service" v-model="flowModel.beforeListeners"/>
      </RowAttribute>

      <RowAttribute :label-width="labelWidth" label="结束后监听">
        <ListenerSelector :service="service" v-model="flowModel.afterListeners"/>
      </RowAttribute>
    </Section>
  </div>
</template>
<script>
import {Form, Input, notification, Select} from 'ant-design-vue';
import RowAttribute from '@/components/flow/layout/RowAttribute.vue';
import {createProps, isEmpty} from '@/utils';
import ListenerSelector from '@/components/flow/ListenerSelector/ListenerSelector.vue';
import {createService} from '@/request/service';
import Section from '@/components/Section/Section.vue';
import FormulaEditor from '@/components/FormulaEditor/FormulaEditor.vue';

export default {
  name: 'FlowModelEditor',
  model: {
    prop: 'flowModel',
    event: 'change'
  },
  components: {
    FormulaEditor,
    Section,
    ListenerSelector,
    Select,
    SelectOption: Select.Option,
    RowAttribute,
    Form,
    FormItem: Form.Item,
    Input,
  },
  props: {
    flowModel: createProps(Object, () => ({
      titleFormulaText: undefined,
      titleFormula: undefined
    })),
    request: createProps(Object, () => ({
      baseURL: '/',
      headers: {},
    }))
  },
  data() {
    return {
      service: createService(this.request),
      labelWidth: '120px',
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 16
      },
      form: this.$form.createForm(this),
    };
  },
  mounted() {
    this.service = createService(this.request);
  },
  methods: {
    check() {
      if (isEmpty(this.flowModel.flowModelName)) {
        notification.warn({
          message: '流程名称不能为空'
        });
        return false;
      }

      if (isEmpty(this.flowModel.titleFormula)) {
        notification.warn({
          message: '流程标题不能为空'
        });
        return false;
      }
      return true;
    },
  }
};
</script>